<template>
<div id="max">
  <div id="app" :style="Width">
    <!-------------------下导航栏（用户）---------------------->
    <router-view />
    <div v-show="tabbar" v-cloak>
      <van-tabbar v-model="active" placeholder>
        <van-tabbar-item @click="Day">
          <span>日子</span>
          <img
            slot="icon"
            slot-scope="props"
            :src="props.active ? icon.active : icon.inactive"
          />
        </van-tabbar-item>
        <van-tabbar-item @click="Festival">
          <span>节日</span>
          <img
            slot="icon"
            slot-scope="props"
            :src="props.active ? icon2.active : icon2.inactive"
          />
        </van-tabbar-item>
        <van-tabbar-item @click="Mine">
          <span>我的</span>
          <img
            slot="icon"
            slot-scope="props"
            :src="props.active ? icon3.active : icon3.inactive"
          />
        </van-tabbar-item>
      </van-tabbar>
    </div>


    <!-------------------登录模块--------------------->
    <div v-show="login" v-cloak>
      <div id="background">
        <div style="height: 200px"></div>
        <div id="module1">
            <font style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;">日&nbsp;子</font>
        </div>
        <div id="module2">
          <div style="height: 40px;"><!--账号框上留白-->
            <br/>
            <font style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;color: red;">
              {{Text}}
            </font>
          </div>
          <el-input
          placeholder="账号"
          v-model="uid"
          class="srk"
          clearable
          maxlength="11"
          style="width: 85%;"
        >
        </el-input>
        <div style="height: 20px;"></div><!--密码框上留白-->
        <el-input
          placeholder="密码"
          v-model="password"
          class="srk"
          clearable
          maxlength="18"
          show-password
          style="width: 85%;"
        >
        </el-input>
        <div style="height: 20px;"></div><!--验证码框上留白-->
        <el-input
          placeholder="验证码"
          v-model="dlyzm"
          class="srk"
          clearable
          maxlength="3"
          style="width: 43%;"
        >
        </el-input>
        <el-input
          placeholder="请输入内容"
          v-model="dlsft"
          style="width: 42%;"
          :disabled="true">
        </el-input>
        <div style="height: 30px;"></div><!--登录按钮上留白-->
        <el-button type="primary" @click="Login" style="width: 85%;" >登录</el-button>
        <div style="height: 10px;" ></div><!--注册按钮上留白-->
        <el-button type="primary" style="width: 85%;" @click="Logondrawer">注册</el-button>
        <br/><br/><br/>
        <a  @click="Passwordrawer" style="cursor: pointer;color:cornflowerblue;">找回密码</a>
        &nbsp;&nbsp;&nbsp;
        <a>丨</a>
        &nbsp;&nbsp;&nbsp;
        <a @click="WeiXin" style="cursor: pointer;color:cornflowerblue;">联系我们</a>
      </div>     
      <!-------------------最下方留白--------------------->
      <div id="down"></div>
      <!-------------------注册弹框--------------------->
    <el-dialog
      title="注册账户"
      :visible.sync="logondrawer"
      direction="btt"
    >
      <span>
        <!--提示文字-->
        <font style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;color: red;font-size: 20px;">
              {{Pointer}}
            </font>
            <br />
            账户：
        <el-input
          placeholder="请输入11位字符"
          v-model="uid1"
          clearable
          maxlength="11"
          style="width: 85%;"
        >
        </el-input>

        <br /><br />
        密码：
        <el-input
          placeholder="请输入密码"
          v-model="password1"
          clearable
          maxlength="18"
          show-password
          style="width: 85%;"
        >
        </el-input>
        <br /><br />
        key：
        <el-input
          placeholder="请输入5位字符的key"
          v-model="key"
          class="srk"
          clearable
          maxlength="5"
          style="width: 85%;"
        >
        </el-input>
        <br /><br />
        验证码：
        <el-input
          placeholder="验证码"
          v-model="zcyzm"
          class="srk"
          clearable
          maxlength="3"
          style="width: 43%;"
        >
        </el-input>
        <el-input
          placeholder="请输入内容"
          v-model="zcsft"
          style="width: 40%;"
          :disabled="true">
        </el-input>
        <br /><br/>
        <font style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;color: red;font-size: 15px;">
          请记住您的key，日后可根据key找回密码！
            </font>
        <br /><br />
        <el-button type="primary" @click="Logon">注册</el-button><br /><br />
      </span>
    </el-dialog>


     <!-------------------找回密码弹框--------------------->
     <el-dialog
      title="找回密码"
      :visible.sync="passwordrawer"
      direction="btt"
    >
      <span>
        <!--提示文字-->
        <font style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;color: red;font-size: 20px;">
              {{Pointer2}}
            </font>
            <br />
            账户：
        <el-input
          placeholder="请输入您的账户"
          v-model="uid2"
          clearable
          maxlength="11"
          style="width: 84%;"
        >
        </el-input>
        <br /><br />
        key：
        <el-input
          placeholder="请输入5位字符的key"
          v-model="key2"
          class="srk"
          clearable
          maxlength="5"
          show-password
          style="width: 85%;"
        >
        </el-input>
        <br /><br />
        新密码：
        <el-input
          placeholder="请输入8-18位字符的密码"
          v-model="password2"
          class="srk"
          clearable
          maxlength="18"
          show-password
          style="width: 83%;"
        >
      </el-input>
        <br /><br />
        验证码：
        <el-input
          placeholder="验证码"
          v-model="zhyzm"
          class="srk"
          clearable
          maxlength="3"
          style="width: 43%;"
        >
        </el-input>
        <el-input
          placeholder="请输入内容"
          v-model="zhsft"
          style="width: 40%;"
          :disabled="true">
        </el-input>
        <br /><br/>
        <el-button type="primary" @click="seek">修改</el-button><br /><br />
      </span>
    </el-dialog>

    </div>
    </div>
  </div>
</div>
</template>

<script>
import { Tabbar, TabbarItem } from "vant";
export default {
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
  },
  data() {
    return {
      year: new Date(),
      tabbar:false,//下导航栏
      login:true,//登录界面
      GLtabbar:false,//管理导航栏
      uid:null,
      password:"",
      Text:"",
      users:[],
      Width:"",
      dlsjs:"",//登录框的随机数
      zcsjs:"",//注册框的随机数
      zhsjs:"",//找回框的随机数
      dlyzm:"",//登录框的验证码
      zcyzm:"",//注册框的验证码
      zhyzm:"",//找回框的算数题
      dlsft:"",//登录框的算数题
      zcsft:"",//注册框的算数题
      zhsft:"",//找回框的算数题
      active: 0,
      logondrawer:false,//注册框
      uid1:null,//注册框
      password1:"",//注册框
      key:"",//注册框
      Pointer:"",//注册框-提示
      passwordrawer:false,//找回密码框
      uid2:null,//找回密码框
      key2:"",//找回密码框
      Pointer2:"",//找回密码框-提示
      password2:"",//找回密码框
      icon: {
        active: require("../src/assets/label/inday.png"),
        inactive: require("../src/assets/label/day.png"),
      },
      icon2: {
        active: require("../src/assets/label/infestival.png"),
        inactive: require("../src/assets/label/festival.png"),
      },
      icon3: {
        active: require("../src/assets/label/incalculator.png"),
        inactive: require("../src/assets/label/calculator.png"),
      },
      params:{

      },
    };
  },
  created() {
    this.Dlyzm();
    this.uid = sessionStorage.getItem("uid");
   if(this.uid && this.uid != null)
    {
      this.tabbar=true
      this.login=false
      this.Width="max-width: 900px;";
    }else{
      this.login=true
      this.tabbar=false
      this.Width="max-width: 100%;"
    }
  },
  methods:{

                                   //为登录页生成验证码
    Dlyzm(){
      this.dlsjs = Math.floor(Math.random() * 101);
      this.dlsft = this.dlsjs + " + " + (this.dlsjs+1) + " = ?";
      this.zcsjs = Math.floor(Math.random() * 101);
      this.zcsft = this.zcsjs + " + " + (this.zcsjs+1) + " = ?"//注册页验证码生成
    },
                                   //为注册页生成验证码
    Zcyzm(){
      this.zcsjs = Math.floor(Math.random() * 101);
      this.zcsft = this.zcsjs + " + " + (this.zcsjs+1) + " = ?"//注册页验证码生成
    },
                               //为注册页生成验证码
    Zhyzm(){
      this.zhsjs = Math.floor(Math.random() * 101);
      this.zhsft = this.zhsjs + " + " + (this.zhsjs+1) + " = ?"//注册页验证码生成
    },
    //------------------------------------登录按钮

    Login(){
      if(this.uid == null)this.Text="请输入账号！";
      else if(this.password == "")this.Text="请输入密码！";
      else if(this.dlyzm != (this.dlsjs*2)+1){this.Text="验证码错误！";this.Dlyzm();}
      else{
        this.$axios({
        url:"http://localhost/users/cx/"+this.uid+"/"+this.password,
        method:"get",
        data:{
            
        },
      })
        .then((res)=>{
          if(res.data[0] == "true"){
            if(res.data[1] == "1")
            {
            
              this.tabbar=true;//导航栏出现
              this.login=false;//登录界面隐藏
              
              this.Width="max-width: 900px;";

              sessionStorage.setItem('uid', this.uid);

              this.$router.push({ path: '/Day/' +  this.uid});
            } else{
              this.$router.push({ path: '/Manage/'+this.uid });
              this.login=false;
              localStorage.setItem("token","111");
            }

          }
          else {this.Text="账号或密码错误！";this.Dlyzm();}
          
      })
        .catch((err)=>{
          console.log(err);
          this.Text="账号或密码错误！";
          this.Dlyzm();
        });
      }
    },

    //------------------------------------注册逻辑
    Logon(){
      if(this.uid1.length < 11){this.Pointer="账户需11位字符"}
      else if(this.password1.length < 8){this.Pointer="请输入8-18位密码"}
      else if(this.key.length < 4){this.Pointer="请输入5位的key"}  
      else if(this.zcyzm != (this.zcsjs*2)+1)this.Pointer="验证码错误！";
      else{
        //查询创建的账号是否存在
      this.$axios({
        url:"http://localhost/users/cx/"+this.uid1,
        method:"get",
        data:{
            
        },
      })
        .then((res)=>{
          if(res.data.data[0].uid == this.uid1){
            this.Pointer="该用户已存在";
            this.Zcyzm();//刷新验证码
          }
        }).catch((err)=>{
          this.$axios({
          url:"http://localhost/users",
          method:"post",
          data:{
              uid:this.uid1,
              password:this.password1,
              judge:1,
              kkey:this.key,
          },
      })
        .then((res)=>{
          this.$confirm("注册成功,请记住您的密码"+this.password1,"提示",{type:"info"}).then(()=>{
            this.logondrawer = false;
          })
              var Month;
              var Day;
              if(this.year.getMonth()<10)  Month ="0" + (this.year.getMonth()+1)//日期小于10+0
              else  Month =(this.year.getMonth()+1);
              if(this.year.getDate()<10)  Day ="0" + (this.year.getDate());
              else  Day =(this.year.getDate());
              this.$axios({                                               //预加纪念日
              url:"http://localhost/festival/",                                             
              method:"post",
              data:{
                uid: this.uid1,
                name: "元旦",
                date: "2023-01-01",
                remarks: "元旦快乐",
                backdrop: "../assets/custom/15.jpg",
                status: 1,
                type: 2,
                calendar:"新历",
              }
        })
            //---------------------------------------
              this.$axios({
              url:"http://localhost/festival/",
              method:"post",
              data:{
                uid: this.uid1,
                name: "六一儿童节",
                date: "2023-06-01",
                remarks: "为了改善儿童的生活，为了反对虐杀儿童和毒害儿童而设立的节日",
                backdrop: "../assets/custom/13.jpg",
                status: 1,
                type: 2,
                calendar:"新历",
              }
        })
        //----------------------------------------
        this.$axios({
              url:"http://localhost/festival/",
              method:"post",
              data:{
                uid: this.uid1,
                name: "与你相遇的日子",
                date: (this.year.getFullYear()).toString()+"-"+Month+"-"+Day,
                remarks: "今天我们相遇在一起",
                backdrop: "../assets/custom/0.jpg",
                status: 1,
                type: 2,
                calendar:"新历",
              }
        })
        //----------------------------------------
        this.$axios({
              url:"http://localhost/festival/",
              method:"post",
              data:{
                uid: this.uid1,
                name: "中秋节",
                date: "2023-08-15",
                remarks: "中秋节有祭月、赏月、吃月饼、看花灯、赏桂花、饮桂花酒等民俗，流传至今，经久不息",
                backdrop: "../assets/custom/3.jpg",
                status: 1,
                type: 2,
                calendar:"农历",
              }
        })
        //----------------------------------------
        this.$axios({
              url:"http://localhost/festival/",
              method:"post",
              data:{
                uid: this.uid1,
                name: "春节",
                date: "2023-01-01",
                remarks: "在春节期间，全国各地均有举行各种贺岁活动",
                backdrop: "../assets/custom/11.jpg",
                status: 1,
                type: 2,
                calendar:"农历",
              }
        })
        //----------------------------------------
      })
        .catch((err)=>{
          console.log(err);
        });
        })
      }

    },

    //----------------------------------------找回密码

    seek(){
      if(this.uid2 == null)this.Pointer2="请输入账号！";
      else if(this.key2 == "")this.Pointer2="请输入key！";
      else if(this.password2.length < 8)this.Pointer2="请输入8-16位密码！";
      else if(this.zhyzm != (this.zhsjs*2)+1){this.Pointer2="验证码错误！";this.Zhyzm();}
      else{
        this.$axios({
        url:"http://localhost/users/key/"+this.uid2+"/"+this.key2,
        method:"get",
        data:{
            
        },
      })
        .then((res)=>{
          if(res.data[0] == "true"){
            this.$axios({
                url:"http://localhost/users/",
                method:"put",
                data:{
                  id:res.data[1],
                  uid:res.data[2],
                  password:this.password2,
                  judge:res.data[3],
                  kkey:this.key2
                }
              }).then((res)=>{
                this.$confirm("验证成功！您的密码是："+this.password2,"提示",{type:"info"}).then(()=>{})
              })
          }
          else this.Pointer2="账号或key错误！"
      })
        .catch((err)=>{
          console.log(err);
          this.Pointer2="账号或key错误！"
        });
      }
    },
    Day(){
      this.$router.push({ path: '/Day/'+this.uid })
    },
    Festival(){
      this.$router.push({ path: '/Festival/'+this.uid })
    },
    Mine(){
      this.$router.push({ path: '/Mine/'+this.uid })
    },
    //注册页面触发按钮
    Logondrawer(){
      this.logondrawer = true;
      this.uid1 = "";
      this.password1 = "";
      this.key = "";
      this.zcyzm = ""; 
      this.Pointer="";
      this.Zcyzm();//调用验证码
    },
    WeiXin(){
      this.$confirm("请您通过wx：18070643221，联系我们","提示",{type:"info"}).then(()=>{})
    },
    Passwordrawer(){
      this.passwordrawer = true;
      this.uid2 = "";
      this.password2 = "";
      this.key2 = "";
      this.zhyzm = "";
      this.Pointer2="";
      this.Zhyzm();//调用验证码
    },
  },
};
</script>
<style lang="less">
[v-cloak]{
  display:none;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  background-color: #f6f9ff;
}
#background {
width:100%;
height:100vh;
background:url("./assets/ui/login.png")center center no-repeat;
background-size:100%100%;
position:absolute;
}
#module1{
  width: 350px;
  margin: 0px auto;
  border-radius: 5px 5px 0 0;
  height: 50px;
  border-bottom:1px solid #A0B1C4;
  background-color: #f4f8ff;
  text-align: center;
  line-height: 50px;
}
#module2{
    width: 350px;
    height: 405px;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 7px 7px -7px #5E5E5E;
    margin: 0px auto;
    background-color: #f9fbff;
    text-align: center;
}
#down{
    height: 30px;
    width: 100%;
    background-color: rgb(97, 97, 97);
    position: fixed;
    bottom: 0;
}
#max{
width:100%;
height:100vh;
background:url("./assets/ui/bc.png");
background-size:100%100%;
position:absolute;
overflow: auto;
}
</style>

